<template>
	<view class="page">
		<!-- #ifdef H5 -->
			<topVue title="收益管理" :isBack="true" rightIcon="setting"></topVue>
		<!-- #endif -->
		<view class="main-content">
			<scroll-view class="content" scroll-y>
				<view class="dataVue">
					<view class="flex-between align-center" style="padding-bottom: 30rpx;">
						<text style="color: #7D8DA1; line-height: 1;">总收益金额</text>
						<text style="color: #000; font-weight: 600; font-size: 32rpx; line-height: 1;">￥{{income?income.totalIncome:0}}</text>
					</view>
					<view class="flex-between align-center" style="padding-bottom: 30rpx;">
						<text style="color: #7D8DA1; line-height: 1;">已提取收益</text>
						<text style="color: #000; font-weight: 600; font-size: 32rpx; line-height: 1;">￥{{income?income.extractedIncome:0}}</text>
					</view>
					<view class="flex-between align-center">
						<text style="color: #7D8DA1; line-height: 1;">可提取收益</text>
						<text style="color: #000; font-weight: 600; font-size: 32rpx; line-height: 1;">￥{{income?income.canExtractedIncome:0}}</text>
					</view>
					
					<view class="btn margin30">提取</view>
					<view class="text-center margin20" style="font-size: 24rpx; color: #7D8DA1;">收益提取7个工作日到账，提取将扣去2%的手续费。</view>
				</view>
				<view class="listVue margin30">
					<u-subsection :list="tabs" :current="current" button-color="#3B82F6" active-color="#fff" bg-color="#F3F4F6" @change="getIncomeList" ></u-subsection>
					<view class="w100 flex-column align-center padding-column20" v-if="isEmpty">
						<image src="../../static/empty.png" style="width: 256rpx; height: 256rpx;"></image>
						<text style="color: #81868e;">暂无收益记录</text>
					</view>
					<view class="item flex-between align-center padding30" v-for="(item,index) in incomeList" :key="index">
						<view class="flex-column flex-between" style="height: 100%;">
							<text style="color: #000; font-weight: 600; font-size: 30rpx; line-height: 1;">￥{{item.income}}</text>
							<text style="color: #7D8DA1; line-height: 1;">{{item.createTime}}</text>
						</view>
						<view class="state"  :class="{active: index%2===0}">{{item.type}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				tabs: [{name: "收益明细"}, {name: "提取记录"}],
				current: 0,
				income:{},
				incomeList:[],
				isEmpty: false
			}
		},
		onLoad() {
			setTimeout(() => {
				this.initialization()
			}, 500)
		},
		methods: {
		async initialization() {
			this.getIncome()
			this.getIncomeList()
		},
		
		/**
		 * 获取用户收益统计
		 * @returns {Promise<void>}
		 */
		async getIncome() {
			const res = await this.$request("/aiet-user-center/user/income/total", {}, "GET")
			if (res.code === 200) {
				this.income = res.data
				console.log("获取用户收益统计", res.data)
			}
		},
		
		/**
		 * 获取用户收益列表
		 * @returns {Promise<void>}
		 */
		async getIncomeList(e) {
			if(e===1){
				this.isEmpty=true;
				this.incomeList=[]
				return
			}
			const res = await this.$request("/aiet-user-center/user/income/list", {}, "GET")
			if (res.code === 200) {
				this.incomeList = res.data
				this.isEmpty = res.data.length === 0
			console.log("获取用户收益列表", res.data)
			}
		}
		
		}
	}
</script>

<style lang="less" scoped>
	.main-content {
		width: 100%;
		height: calc(100vh - var(--window-bottom) - var(--window-top) - 92rpx);
		padding: 30rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #10B981, #3B82F6);
		.content {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
			box-sizing: border-box;
			.dataVue {
				width: 100%;
				padding: 30rpx;
				background: #fff;
				border-radius: 12rpx;
				.btn {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					background: linear-gradient(to right, #3B81F6, #2563EB);
					border-radius: 12rpx;
					color: #fff;
				}
			}
			.listVue {
				width: 100%;
				background: #fff;
				border-radius: 12rpx;
				.item {
					width: 100%;
					height: 130rpx;
					border-bottom: 1rpx solid #f5f5f5;
					.state {
						width: 182rpx;
						height: 62rpx;
						text-align: center;
						line-height: 62rpx;
						background: #DCFCE7;
						color: #36A878;
						border-radius: 12rpx;
					}
					.active {
						color: #D39822;
						background: #FEF9C3;
					}
				}
				.item:nth-last-child(1) {
					border: none;
				}
			}
		}
	}
</style>